<template>
    <div class="FilePreview">
        <MyDialog :title="title" v-model="isShow" :type="DialogType.C2" top="3%" append-to-body @close="isShow = false">
            <div>
                <el-carousel ref="CarouselRef" height="400px" :autoplay="false" :initial-index="idx" :loop="false" indicator-position="none" @change="onChange">
                    <el-carousel-item v-for="(item, index) in files" :key="index">
                        <div class="imgConten">
                            <img v-if="item.isImg" :src="item.displayUrl" :alt="item.fileName" title="点击打开新页看大图" @click="onOpenImg" />
                            <p v-else><i class="exticon" :class="item.icon"></i></p>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>

            <template #footer>
                <el-button type="primary" plain @click="onDownload" :disabled="false">下载</el-button>
            </template>
        </MyDialog>
    </div>
</template>

<script lang="ts" setup>
import { FileExt } from "@/_gx/Types";
import { DialogType } from "@/_gx/TsEnums";

const isShow = ref(false);
const files = ref<Array<FileExt>>([]);
const idx = ref(0);
const title = ref("");
const CarouselRef = ref();

//初始化
const Init = (_files: Array<FileExt>, _idx: number = 0) => {
    if (Gx.IsEmpty(_files) || _files.length == 0) {
        App.Tips({ msg: "未包含任何图片或文件信息！" });
        return;
    }

    _files = Gx.DeepCopy(_files) as Array<any>;

    files.value = _files;
    idx.value = _idx;

    setTitle();
    isShow.value = true;

    nextTick(() => {
        CarouselRef.value.setActiveItem(_idx);
    });
};

//幻灯片切换时触发
const onChange = (_idx) => {
    idx.value = _idx;
    setTitle();
};

//下载文件
const onDownload = () => {
    let item = files.value[idx.value];
    Gx.DownloadFile(item.url, item.fileName);
};

//点击打开图片
const onOpenImg = () => {
    let item = files.value[idx.value];
    window.open(item.displayUrl);
};

//设置标题
const setTitle = () => {
    if (files.value.length > 0 && !Gx.IsEmpty(files.value[idx.value]) && !Gx.IsEmpty(files.value[idx.value].fileName)) {
        title.value = `查看 - ${files.value[idx.value].fileName}`;
    } else {
        title.value = "查看";
    }
};

//抛出属性或方法
defineExpose({ Init });
</script>

<style lang="scss" scoped>
.imgConten {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.imgConten img {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
}

.exticon {
    font-size: 250px;
    margin: 0;
}
</style>
